import { reactive, onMounted, onUnmounted, toRefs } from "vue";

export function useMouse() {
  const mousePosition = reactive({ x: 0, y: 0 });
  const update = (e: MouseEvent) => {
    mousePosition.x = e.pageX;
    mousePosition.y = e.pageY
  }

  onMounted(() => {
    window.addEventListener('mousemove', update)
  })
  onUnmounted(() => {
    window.removeEventListener('mousemove', update)
  })

  return toRefs(mousePosition)
}